<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> -->
    <script src="vue.global.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="element-plus.css">
    <!-- import JavaScript -->
    <script src="element-plus.js"></script>
    <title>机器学习</title>

    <style>
        head,
        body {
            margin: 0;
            padding: 0;
        }

        .fullwidth {
            width: 100%;
        }

        .fullheight {
            height: 100%;
        }

        .imagewidth {
            width: 320px;
        }

        .imageheight {
            height: 240px;
        }

        .color-flag:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <div id="app" style="width: 100%; height: 100%;">
        <el-select v-model="model" @change="OnModelChanged"
            style="position: absolute; right: 10px; top: 2px; z-index: 10; width: 200px;">
            <template #prefix>模型</template>
            <el-option key="roadlines" label="物品" value="goods"></el-option>
            <el-option key="roadsigns" label="路标" value="roadsigns"></el-option>
            <el-option key="roadlines" label="路线" value="roadlines"></el-option>
            <el-option key="roadlines_near_direction" label="近路线-方向" value="roadlines_near_direction"></el-option>
            <el-option key="roadlines_far_direction" label="远路线-方向" value="roadlines_far_direction"></el-option>
        </el-select>
        <el-tabs type="border-card" style="height: 100%; margin: 0px; border: 0px;" v-model="tabs_value">
            <el-tab-pane label="数据集" name="dataset">
                <div style="display: flex; margin-top: 10px;">
                    <div
                        style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                        <div class="imagewidth  fullheight">
                            <div class="fullwidth" style="display: flex; justify-content: space-between;">
                                <el-text type="info">相机图:</el-text>
                                <el-switch v-model="is_train" size="small" active-text="训练模式" inactive-text="普通模式"/>
                            </div>
                            <div id="camera-container" class="imagewidth imageheight" v-if="tabs_value == 'dataset'">
                                <img v-if="camera_url && camera_url != ''" id="img" :src="camera_url" crossorigin
                                    class="fullwidth fullheight" :width="image_width" :height="image_height" />
                                <video v-else id="video" autoplay class="fullwidth fullheight" :width="image_width"
                                    :height="image_height"></video>
                                <canvas id="canvas"
                                    style="visibility: hidden; position: absolute; left: 0px; right: 0px;"
                                    class="fullwidth fullheight" :width="image_width" :height="image_height"></canvas>
                            </div>
                            <div class="fullwidth" style="display: flex;">
                                <el-select v-model="classify" filterable allow-create default-first-option
                                    :reserve-keyword="false" placeholder="图像分类" style="flex: 8;">
                                    <template #prefix>图像分类</template>
                                    <el-option v-for="(value, key) in classify_map" :key="key" :label="key"
                                        :value="key"></el-option>
                                </el-select>
                                <el-button type="primary" @click="ClickAddClassifyImage" style="flex:2;">添加</el-button>
                            </div>
                            <div class="fullwidth"
                                style="display: flex; flex-direction: column; padding-top: 10px; align-items: center;">
                                <el-button type="primary" @click="ClickPredictBtn"
                                    class="fullwidth">{{predict_btn_text}}</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickStepAutoMovedBtn">单次智能移动</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickAutoMovedBtn">连续智能移动</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickMoveForwardBtn">前进</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickMoveLeftBtn">左转</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickMoveRightBtn">右转</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickMoveBackwardBtn">后退</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickStopMoveBtn">停止移动</el-button>
                            </div>
                        </div>
                    </div>
                    <div
                        style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                        <div class="imagewidth fullheight">
                            <div class="fullwidth">
                                <el-text type="info">训练图:</el-text>
                            </div>
                            <div id="camera-container" class="imagewidth imageheight" style="position: relative;">
                                <el-image id="image" :src="image.data" class="fullwidth fullheight" :width="image_width"
                                    :height="image_height">
                                </el-image>
                                <div v-if="model == 'roadsigns'" :style="roadsign_box_style"></div>
                            </div>
                            <div class="fullwidth" style="display: flex; margin-top: 10px;">
                                <el-select v-model="filter_classify" filterable default-first-option
                                    :reserve-keyword="false" placeholder="分类名称" style="flex: 8;">
                                    <template #prefix>显示分类</template>
                                    <el-option key="全部分类" label="全部分类" value="全部分类"></el-option>
                                    <el-option v-for="(value, key) in classify_map" :key="key" :label="key"
                                        :value="key"></el-option>
                                </el-select>
                            </div>
                            <div class="fullwidth" style="display: flex; margin-top: 10px;">
                                <el-select v-model="image.classify" filterable allow-create default-first-option
                                    :reserve-keyword="false" placeholder="图像分类" style="flex: 8;"
                                    @change="OnImageClassifyChanged">
                                    <el-option v-for="(value, key) in classify_map" :key="key" :label="key"
                                        :value="key"></el-option>
                                </el-select>
                                <el-button type="primary" @click="ClickDeleteClassifyImage"
                                    style="flex:2;">删除</el-button>
                            </div>
                            <div class="fullwidth" style="margin-top: 10px;">
                                <el-pagination small hide-on-single-page background :current-page="image_index + 1"
                                    layout="prev, pager, next" :page-size="1" :pager-count="5"
                                    :total="filter_classify_image_list.length" @current-change="OnCurrentChange" />
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="训练模型" name="model">
                <div style="display: flex; justify-content: center; ">
                    <el-form :model="train_params" label-width="auto" style="width: 600px">
                        <el-form-item label="单次训练样本数">
                            <el-input v-model="train_params.batch" type="number" />
                        </el-form-item>
                        <el-form-item label="训练次数">
                            <el-input v-model="train_params.epochs" type="number" />
                        </el-form-item>
                        <el-form-item label="随机采样">
                            <el-switch v-model="train_params.random" />
                        </el-form-item>
                        <el-form-item label="当前训练损失">
                            {{train_params.loss}}
                        </el-form-item>
                        <el-form-item label="  ">
                            <el-button type="primary" @click="ClickStartTrain">开始训练</el-button>
                            <el-button type="primary" @click="ClickStopTrain">停止训练</el-button>
                            <el-button type="primary" @click="ClickDownloadTrainData">下载训练数据</el-button>
                            <el-button type="primary" @click="ClickDeleteTrainModel">删除训练模型</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="颜色模型" name="color">
                <div style="display: flex; justify-content: center;">
                    <div style="width: 640px;">
                        <el-select v-model="map_name">
                            <template #prefix>地图</template>
                            <el-option key="map" label="默认地图" value="map"></el-option>
                            <el-option key="none" label="空地图" value="none"></el-option>
                        </el-select>
                        <el-select v-model="selected_color_classify" filterable default-first-option
                        :reserve-keyword="false" placeholder="颜色" style="flex: 8; margin-top: 10px;" @change="OnImageClassifyChanged">
                        <template #prefix>颜色</template>
                        <el-option v-for="(value, key) in color_classify_list" :key="key" :label="value"
                            :value="value"></el-option>
                        </el-select>
                        <div style="width: 640px; height: 480px; position: relative; margin-top: 10px;">
                            <el-image id="image" :src="image.data" class="fullwidth fullheight"></el-image>
                            <div
                                style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; display: flex; flex-wrap: wrap;">
                                <div v-for="data in colordatas"
                                    style="display: inline-block; width: 20px; height: 20px; text-align: center; user-select: none; font-size:12px; color: green;"
                                    @click="ClickColorFlag(data)" class="color-flag">{{data.selected ? " " :
                                    data.value}}</div>
                            </div>
                        </div>
                        <div class="fullwidth"
                            style="display: flex; align-items: center; justify-content: center; margin-top:10px;">
                            <el-pagination small hide-on-single-page background :current-page="image_index + 1"
                                layout="prev, pager, next" :page-size="1" :total="filter_classify_image_list.length"
                                @current-change="OnCurrentChange" />
                        </div>
                        <div class="fullwidth" style="display: flex; margin-top: 10px;">
                            <el-select v-model="filter_classify" filterable default-first-option
                                :reserve-keyword="false" placeholder="分类名称" style="flex: 8;">
                                <template #prefix>显示分类</template>
                                <el-option key="全部分类" label="全部分类" value="全部分类"></el-option>
                                <el-option v-for="(value, key) in classify_map" :key="key" :label="key"
                                    :value="key"></el-option>
                            </el-select>
                        </div>
                        <div class="fullwidth" style="margin-top: 10px;"><el-button type="primary" @click="ClickTrainSelectedColor" class="fullwidth">训练已选择的颜色点并重新预测</el-button></div>
                        <div class="fullwidth" style="margin-top: 10px;"><el-button type="primary" @click="ClickDownLoadColorDataSet" class="fullwidth">下载数据集</el-button></div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="路线预测" name="roadline">
                <div style="display: flex; justify-content: center;">
                    <div style="width: 640px;">
                        <div style="width: 640px; height: 480px; position: relative; margin-top: 10px;">
                            <el-image id="image" :src="image.data" class="fullwidth fullheight"></el-image>
                            <div
                                style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; display: flex; flex-wrap: wrap;">
                                <div v-for="data in roadlinedatas"
                                    style="display: inline-block; width: 20px; height: 20px; text-align: center; user-select: none; font-size:12px; color: red; display: flex; align-items: center; justify-content: center;"
                                    @click="ClickColorFlag(data)" class="color-flag">{{data.selected ? " " :
                                    data.value}}</div>
                            </div>
                        </div>
                        <div class="fullwidth"
                            style="display: flex; align-items: center; justify-content: center; margin-top:10px;">
                            <el-pagination small hide-on-single-page background :current-page="image_index + 1"
                                layout="prev, pager, next" :page-size="1" :total="filter_classify_image_list.length"
                                @current-change="OnCurrentChange" />
                        </div>
                        <div class="fullwidth" style="display: flex; margin-top: 10px;">
                            <el-select v-model="filter_classify" filterable default-first-option
                                :reserve-keyword="false" placeholder="分类名称" style="flex: 8;">
                                <template #prefix>显示分类</template>
                                <el-option key="全部分类" label="全部分类" value="全部分类"></el-option>
                                <el-option v-for="(value, key) in classify_map" :key="key" :label="key"
                                    :value="key"></el-option>
                            </el-select>
                        </div>
                        <!-- <el-button type="primary" @click="ClickTrainSelectedColor" class="fullwidth" style="margin-top: 10px;">训练已选择的颜色点并重新预测</el-button> -->
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="自动驾驶" name="auto_drive">
                <div style="display: flex; margin-top: 10px; justify-content: space-between; height: 100%;">
                    <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                        <div class="imagewidth fullheight">
                            <div class="fullwidth">
                                <div class="fullwidth" style="display: flex; justify-content: space-between;">
                                    <el-text type="info">相机图:</el-text>
                                    <el-switch v-model="is_train" size="small" active-text="训练模式" inactive-text="普通模式"/>
                                </div>
                            </div>
                            <div id="camera-container" class="imagewidth imageheight" style="position: relative;" v-if="tabs_value == 'auto_drive'">
                                <img v-if="camera_url && camera_url != ''" id="img" :src="camera_url" crossorigin
                                    class="fullwidth fullheight" :width="image_width" :height="image_height" />
                                <video v-else id="video" autoplay class="fullwidth fullheight" :width="image_width"
                                    :height="image_height"></video>
                                <canvas id="canvas"
                                    style="visibility: hidden; position: absolute; left: 0px; right: 0px;"
                                    class="fullwidth fullheight" :width="image_width" :height="image_height"></canvas>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickAutoMovedBtn">智能移动</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickStopMoveBtn">停止移动</el-button>
                            </div>
                            <div style="margin-top: 10px; width: 100%;">
                                <el-button type="primary" style="width: 100%;" @click="ClickAddDriveDataBtn">添加驾驶数据</el-button>
                            </div>
                        </div>
                    </div>
                    <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                        <div class="imagewidth fullheight">
                            <div class="fullwidth">
                                <el-text type="info">训练图:</el-text>
                            </div>
                            <div class="imagewidth imageheight">
                                <el-image :src="drive_data.image_data" class="fullwidth fullheight" :width="image_width"
                                    :height="image_height">
                                </el-image>
                            </div>
                            <div class="fullwidth" style="margin-top: 10px;">
                                <el-pagination small hide-on-single-page background :current-page="drive_data_index + 1"
                                    layout="prev, pager, next" :page-size="1" :pager-count="5"
                                    :total="auto_drive_datas.length" @current-change="OnDriveDataIndexChange" />
                            </div>
                            <div class="fullwidth" style="margin-top: 10px; display: flex; justify-content: space-between;">
                                <el-select v-model="drive_data.roadline_near_direction_label" filterable allow-create default-first-option
                                :reserve-keyword="false" style="flex: 8;">
                                <template #prefix>近路线-方向</template>
                                <el-option v-for="(value, key) in classify_map" :key="key" :label="key"
                                    :value="key"></el-option>
                                </el-select>
                                <el-button type="primary" @click="ClickNearRoadLineData">添加到训练数据</el-button>
                            </div>
                            <div class="fullwidth" style="margin-top: 10px; display: flex; justify-content: space-between;">
                                <el-select v-model="drive_data.roadline_far_direction_label" filterable allow-create default-first-option
                                :reserve-keyword="false" style="flex: 8;">
                                <template #prefix>远路线-方向</template>
                                <el-option v-for="(value, key) in classify_map" :key="key" :label="key"
                                    :value="key"></el-option>
                                </el-select>
                                <el-button type="primary" @click="ClickFarRoadLineData">添加到训练数据</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <script src="NPL.js"></script>
    <script src="train.js"></script>
    <script defer src="asset.js"></script>
    <script defer src="darknet.js"></script>
    <!-- <script defer src="ColorImage.js"></script> -->
</body>

</html>